<template>
  <div class="car">
    <div class="van-row">
      <div
        data-v-6028a368
        class="van-col van-col--8"
        style="padding-left: 10px; padding-right: 13.3333px"
      >
        <i class="van-icon van-icon-checked" style="color: darkred"></i>
        30天无忧退货
      </div>
      <div
        data-v-6028a368
        class="van-col van-col--8"
        style="padding-left: 14.666667px; padding-right: 14.666667px"
      >
        <i class="van-icon van-icon-checked" style="color: darkred"></i>
        48小时快速退费
      </div>
      <div
        data-v-6028a368
        class="van-col van-col--8"
        style="padding-left: 13.3333px; padding-right: 1.3333px"
      >
        <i class="van-icon van-icon-checked" style="color: darkred"></i>
        满88元免邮费
      </div>
    </div>
    <!-- 商品选中状态 -->
    <div class="carcard">
      <van-checkbox-group v-model="result">
        <van-checkbox
          :name="String(v.product_id)"
          @click="change(v.checked, v.product_id, v.goods_id, v.id)"
          :disabled="disable"
          v-for="(v, k) in cartList"
          :key="k"
        >
          <van-card
            :num="v.number"
            :price="v.retail_price + '.' + '00'"
            :title="v.goods_name"
            :thumb="v.list_pic_url"
          >
            <!-- 删除 -->
            <template #footer>
              <van-button
                type="danger"
                size="small"
                @click="del(String(v.product_id))"
                >删除</van-button
              >
              <!-- 步进器 -->
              <div>
                <van-stepper
                  v-model="v.number"
                  v-show="show"
                  @change="update"
                />
              </div>
            </template>
          </van-card>
          <hr />
        </van-checkbox>
      </van-checkbox-group>
    </div>
    <!-- 总价和选中商品个数 -->
    <div class="submit">
      <van-submit-bar :price="checkedGoodsAmount * 100" button-text="提交订单">
        <van-checkbox v-model="checked" @click="Allselect" :disabled="disable"
          >全选</van-checkbox
        >
        <template #tip>
          共计{{ checkedGoodsCount }}件商品，点击<van-button
            :type="bool ? 'primary' : 'danger'"
            @click="clickchange"
            >{{ bool ? "编辑" : "完成编辑" }}</van-button
          >可进行进行修改
        </template>
      </van-submit-bar>
    </div>
    <!-- 清空后状态 -->
    <div>
      <van-empty
        v-show="show1"
        class="custom-image"
        image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
        description="没有了，赶紧去加入购物车吧！"
      />
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Toast } from "vant";
Vue.use(Toast);
import {
  GetCartindex,
  GetCartcheck,
  GetDelte,
  GetCartupdate,
} from "@/request/api.js";
export default {
  data() {
    return {
      cartList: "",
      show: false, //步进器
      bool: true,
      disable: false, //禁用
      show1: false, //提示层
      result: [],
      checked: false, //全选
      checkedGoodsAmount: 0,
      checkedGoodsCount: 0,
      goodsId: 0,
      id: 0,
      productId: 0,
    };
  },
  methods: {
    // 全选
    Allselect() {
      if (this.disable) {
        return;
      }
      let proid = [];
        this.cartList.forEach((item) => {
          proid.push(String(item.product_id));
        });
        //  判断是否全选
        if (this.checked) {
          // 全选
          GetCartcheck({ isChecked: 1, productIds: proid }).then((res) => {
            console.log(res);
            this.cartList = res.data.cartList;
            this.checkedGoodsAmount = res.data.cartTotal.checkedGoodsAmount;
            this.checkedGoodsCount = res.data.cartTotal.checkedGoodsCount;
            this.cartList.forEach((item) => {
              this.result.push(String(item.product_id));
            });
          });
        } else {
          GetCartcheck({ isChecked: 0, productIds: proid }).then((res) => {
            // console.log(res);
            this.cartList = res.data.cartList;
            this.checkedGoodsAmount = res.data.cartTotal.checkedGoodsAmount;
            this.checkedGoodsCount = res.data.cartTotal.checkedGoodsCount;
            this.result = [];
          });
        }
      // console.log(proid);
    },

    //   删除
    del(id) {
      GetDelte({ productIds: id }).then((res) => {
        // console.log(res);
        this.cartList = res.data.cartList;
        this.checkedGoodsAmount = res.data.cartTotal.checkedGoodsAmount;
        this.checkedGoodsCount = res.data.cartTotal.checkedGoodsCount;
        if (this.checkedGoodsCount == 0) {
            this.show1 = !this.show1;
        }
      });
    },
    //完成编辑处
    clickchange() {
      this.bool = !this.bool;
      this.show = !this.show;
      this.disable = !this.disable;
      //   this.checked=!this.checked
    },
    //   步进器
    update(v) {
      setTimeout(() => {
        GetCartupdate({
          goodsId: this.goodsId,
          id: this.id,
          number: v,
          productId: this.productId,
        }).then((res) => {
          // console.log(res);
          this.cartList = res.data.cartList;
          this.checkedGoodsAmount = res.data.cartTotal.checkedGoodsAmount;
          this.checkedGoodsCount = res.data.cartTotal.checkedGoodsCount;
        });
      });
    },

    //   切换状态（单选）
    change(checked, Pid, Gid, id) {
      //
      if (this.disable) {
        this.goodsId = Gid;
        this.id = id;
        this.productId = Pid;

        return;
      }

      let ischeck = 0;
      if (checked == 0) {
        ischeck = 1;
      }
      console.log(checked);
      GetCartcheck({ isChecked: ischeck, productIds: Pid }).then((res) => {
        console.log(res);
        this.cartList = res.data.cartList;
        this.checkedGoodsAmount = res.data.cartTotal.checkedGoodsAmount;
        this.checkedGoodsCount = res.data.cartTotal.checkedGoodsCount;
        
      });
      if (res.data.cartTotal.checkedGoodsCount ==res.data.cartTotal.goodsCount){
              this.checked = true;
          }
    },
  },
  created() {
    GetCartindex().then((res) => {
      // console.log(res);
      this.cartList = res.data.cartList;
      this.checkedGoodsAmount = res.data.cartTotal.checkedGoodsAmount;
      this.checkedGoodsCount = res.data.cartTotal.checkedGoodsCount;
      //   this.cartTotal=res.data.cartTotal
      this.cartList.forEach((item) => {
        if (item.checked == 1) {
          this.result.push(String(item.product_id));
        }
      });
      if (this.checkedGoodsCount == 0) {
        this.show1 = !this.show1;
      }
      // console.log(this.result);
    });
  },
};
</script>

<style lang="less">
.car {
  width: 100%;
  height: 100%;
  background-color: white;
}
.checkbox {
  margin-top: 20px;
}
.van-checkbox__label {
  width: 400px;
}
.van-col {
  float: left;
  box-sizing: border-box;
  min-height: 1px;
}
.van-row {
  background-color: #efefef;
}
.van-row::after {
  display: table;
  clear: both;
  content: "";
}
.van-col[data-v-6028a368] {
  font-size: 13px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.van-col[data-v-6028a368] {
  font-size: 13px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.van-col[data-v-6028a368] {
  font-size: 13px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.van-submit-bar {
  position: fixed;
  left: 0;
  bottom: 50px;
}
.van-submit-bar__text {
  width: 177px;
}
.van-submit-bar__bar .van-checkbox {
  width: 100px;
}
.van-submit-bar__tip {
  line-height: 44px;
}
.carcard .van-card__content .van-card__title {
  padding-top: 20px;
  font-size: 16px;
}
.carcard {
  overflow: scroll;
  margin-bottom: 150px;
}
.carcard .van-icon-success {
  margin-left: 5px;
}
// .carcard .van-card__footer {
//   z-index: 10;
// }
.custom-image .van-empty__image {
  width: 90px;
  height: 100%;
}
</style>